<!--
@name:tabScaleSettings
@author:Zhenglei
@date:15:13
@description:tabScaleSettings
@update:2022/7/1315:13
-->
<template>
  <div class="pd-20">
    <h2 style="font-weight: bold;margin-bottom:36px">量表：</h2>
    <el-input @clear="handleOption('select')" v-model="formModel.searchCondition" clearable placeholder="请输入量表"
              class="w-200"></el-input>
    <el-button type="primary" @click="handleOption('select')">查 询</el-button>
    <el-button type="primary" @click="handleOption('add')">增 加</el-button>
    <element-table class="mt-20"
                   :columns="columns"
                   :data="tableData"
                   v-loading="loading"
                   pager
                   :pageTotal="pageTotal"
                   :pageIndex="pageIndex"
                   :pageSize="pageSize"
                   @handleChangePage="handleChangePage">
      <template v-slot:option="{row,index}">
        <el-button type="warning"
                   v-if="row.isMust===0"
                   @click="handleOption('settingRequired',row,index)">设为必填
        </el-button>
        <el-button type="info"
                   v-if="row.isMust===1"
                   @click="handleOption('cancleRequired',row,index)">取消必填
        </el-button>
        <el-button type="danger"
                   @click="handleOption('del',row,index)">删除
        </el-button>
      </template>

    </element-table>
    <dialog-scale v-if="showDialog" :listData="formModel.themes" :visible.sync="showDialog" :dataObj="dataObj"
                  @handleResultData="handleResultData"/>
  </div>
</template>

<script>
import ElementTable from "../../../../base/ElementTable";
import scaleSettingDialog from "./scaleSettingDialog";

export default {
  name: "tabScaleSettings",
  data() {
    return {
      loading: false,
      showDialog: false,
      dataObj: {},
      index: 0,
      formModel: {
        searchCondition: '',
      },
      tableData: [],
      pageSize: 20,
      pageIndex: 1,
      pageTotal: 0,
      columns: [
        {
          label: '主题名称',
          prop: 'dolThemeName',
          align: 'center'
        }, {
          label: '量表名称',
          prop: 'scaleName',
          align: 'center'
        }, {
          label: '是否必填',
          prop: 'isMust',
          align: 'center',
          formatter: (row, cellValue) => {
            if (row.isMust === 1) return <el-tag type="success">是</el-tag>
            if (row.isMust === 0) return <el-tag type="danger">否</el-tag>
          },
        }, {
          label: '操作',
          prop: 'option',
          align: 'center',
          isSlot: true
        }
      ]
    }
  },
  created() {
    this.getList()
  },
  methods: {
    //获取详情
    getList() {
      this.loading = true
      this.post(this.api.healthMap.getDolScaleList, {
        pageIndex: this.pageIndex - 1,
        pageSize: this.pageSize,
        ...this.formModel
      }).then((res) => {
        this.loading = false
        if (res.data.code === '200') {
          this.tableData = res.data.object
          this.pageTotal = res.data.totalNum
        }
      })
    },
    handleOption(op, row, index) {
      switch (op) {
        case 'select':
          this.pageIndex = 1
          this.getList();
          break
        case 'add':
          this.dataObj = {}
          this.showDialog = true
          break;

        case 'del':
          this.$confirm('确定删除量表？', '提示', {
            type: 'warning'
          }).then(() => {
            this.post(this.api.healthMap.delDolScale, {
              dolThemeId: row.dolThemeId
            }).then((res) => {
              if (res.data.code === '200') {
                this.$message.success('删除成功!')
                this.getList()
              }
            })
          })
          break;
        case 'settingRequired':
          this.$confirm('确定设置必填？', '提示', {
            type: 'warning'
          }).then(() => {
            this.setDolScaleMust(row.dolThemeId, 1)
          })
          break
        case 'cancleRequired':
          this.$confirm('确定取消必填？', '提示', {
            type: 'warning'
          }).then(() => {
            this.setDolScaleMust(row.dolThemeId, 0)
          })
          break


      }

    },
    //设置必填
    setDolScaleMust(dolThemeId, isMust) {
      this.post(this.api.healthMap.setDolScaleMust, {
        dolThemeId: dolThemeId,
        isMust: isMust
      }).then((res) => {
        if (res.data.code === '200') {
          this.$message.success('设置完成!')
          this.getList()
        }
      })
    },

    // 分页
    handleChangePage(page) {
      this.pageIndex = page;
      this.getList();
    },
  },
  components: {
    'element-table': ElementTable,
    'dialog-scale': scaleSettingDialog
  }
}
</script>

<style scoped>

</style>
